<template>
    <div class="container" :style="rObj.isDark ? 'border-color:#2e2e32' : 'border-color:#e2e2e3'">
        <div v-if="!hasSidebar" :class="rObj.isDark ? 'text-white' : ''" style="text-align: center;margin-bottom: 10px;"
            v-html="rObj.lang == 'en' ? rObj.msg : rObj.msgZh"></div>
        <div class="beian">
            <div :class="rObj.isDark ? 'text-white' : ''">Copyright © 2020-present {{ rObj.lang == 'en' ? rObj.author :
        rObj.authorZh }}</div>
            <div :class="rObj.isDark ? 'text-white' : ''"
                style="display:flex; justify-content:center; margin-top: 10px;">
                <p style="display:flex;margin-right:20px">
                    <img src="http://www.beian.gov.cn/img/ghs.png" style="margin-right:6px;width:20px;height:20px;"
                        alt="备案信息图标" />
                    <a :class="rObj.isDark ? 'text-white' : 'text-[rgba(60, 60, 67, .78)]'"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34042202000110"
                        target="_blank" rel="noopener noreferrer">
                        皖公网安备34042202000110号
                    </a>
                </p>
                <p>
                    <a :class="rObj.isDark ? 'text-white' : 'text-[rgba(60, 60, 67, .78)]'"
                        href="https://beian.miit.gov.cn/" target="_blank"
                        rel="noopener noreferrer">皖ICP备2020015467号-2</a>
                </p>
            </div>
        </div>
    </div>
</template>

<!--.vitepress/theme/MyLayout.vue-->
<script setup>
import { reactive, watch } from 'vue';
import { useData } from 'vitepress'
import { useSidebar } from 'vitepress/theme'

const { lang, isDark } = useData()
const { hasSidebar } = useSidebar()

watch(
    lang,
    (newValue, oldValue) => {
        rObj.lang = newValue
    },
    {
        immediate: false,
    }
);

watch(
    isDark,
    (newValue, oldValue) => {
        rObj.isDark = newValue
    },
    {
        immediate: false,
    }
);


const rObj = reactive({
    isDark: isDark,
    lang: window.location.href.includes('/zh/') ? 'zh' : 'en',
    msg: 'Disclaimer: Some of the resources on this site are collected from the internet.  \
            We do not participate in their production and they are only intended for internet enthusiasts to learn and research. <br /> \
            If we have inadvertently infringed upon your rights, \
            please contact the site administrator promptly to handle the deletion. \
            We ask for your understanding! <br /> \
            For copyright infringement takedown requests, illegal reporting, or submissions, \
            please contact: mpcexiao@gmail.com',
    msgZh: '免责声明：本站部分资源收集整理于网络，本站不参与制作，\
                    仅用于互联网爱好者学习和研究，如有不慎侵犯了您的权利，请及时联系站长处理删除，敬请谅解！\
                    侵权删帖/违法举报/投稿：mpcexiao@gmail.com',
    author: 'MasterH',
    authorZh: '黄师傅'
})

</script>

<style lang="scss" scoped>
@media (min-width: 1536px) {
    .container {
        min-width: 100%;
    }
}

.container {
    width: 100% !important;
    border-top: 1px solid #e2e2e3;
    padding: 20px 100px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: rgba(60, 60, 67, .78);
    font-size: 14px;

    .beian {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}
</style>
